<template>
  <div class="information_details">
    <div class="header">
      <details-header :title="article.title"></details-header>
    </div>
    <div>
      <details-content v-if="article" :content="article"></details-content>
    </div>
    <div>
      <about-recommend :content="recommend"></about-recommend>
    </div>
  </div>
</template>

<script>
  import DetailsHeader from '../../components/common/DetailsHeader';
  import DetailsContent from '../../components/common/DetailsContent';
  import AboutRecommend from '../../components/common/AboutRecommend';
  import {
    getListDetails,
    // getAboutRecommend
  } from '../../axios/api';
  import {getCityName} from '../../assets/js/cache';
  import { Indicator } from 'mint-ui';

  export default {
    name: 'InformationDetails',
    data() {
      return {
        title: '',
        content: {},
        article:{},
        recommend:[],
        // formData: {
        //   id: this.$route.params.id,
        //   city_id: getCityName().cityId
        // },
        contentAbout: []
      }
    },
    methods: {
      getInformationDetails() {
        let that = this;
        Indicator.open();
        //获取正文
        getListDetails(that.$route.params.id).then(res => {
          Indicator.close();
          that.title = res.data.title;
          that.content = res.data;
          that.article = res.data.article;
          that.recommend= res.data.recommend;
          console.log(res);
          this.$store.commit('setCircleOfFriendsTitle',res.data.article.title);
          this.$store.commit('setCircleOfFriendsDesc',res.data.article.title);
        }).catch(err => {
          console.log(err)
        });
        //获取相关资讯推荐;
        // that.formData.id = that.$route.params.id;
        // getAboutRecommend(that.formData).then(res => {
        //   console.log(res.data);
        //   that.contentAbout = res.data;
        // }).catch(err => {
        //   console.log(err)
        // })
      }
    },

    watch: {
      '$route'(to, from) {
        if (to.name === 'InformationDetails') {
          this.getInformationDetails();
        }
      }
    },
    created() {
      this.getInformationDetails();
    },
    components: {
      DetailsHeader,
      DetailsContent,
      AboutRecommend
    }
  }
</script>

<style scoped>
  .information_details {
    padding-top: 50px;
  }

  .information_details .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

</style>
